import React from 'react'
import { Icon, Form, Modal, Tabs, Input, Button, message } from 'antd';
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react';

import User from '../store/user_store'

@inject((stores) => {
  const store = {
    userStore: stores.userStore,
  }
  return store
})

@observer
class UserModal extends React.Component {
  constructor() {
    super();
    this.state = {
      activeKey: 'login',
    }
    this.doLogin = this.doLogin.bind(this)
    this.doRegist = this.doRegist.bind(this)
  }
  componentDidMount() {

  }
  // 隐藏显示modal
  setModalVisibale(status) {
    this.props.setModalVisibale(status);
  }
  changeTabs(key) {
    this.setState({
      activeKey: key,
    })
  }
  // 获得注册的数据
  doRegist(e) {
    e.preventDefault();
    const data = ['r_username', 'r_password', 'r_confirmPassword', 'r_email', 'r_phone', 'r_name'];
    const param = Object.assign({}, this.props.form.getFieldsValue(data));
    this.props.form.validateFields(data, (error) => {
      if (!error) {
        if (/1[0-9]{10}/.test(param.r_phone)) {
          this.props.userStore.doRegist(param).then((res) => {
            this.setState({
              activeKey: 'register',
            })
            message.success(res.message)
          }).catch(err => message.error(`注册失败 ${err}`))
        } else {
          message.error('手机号格式错误')
        }
      } else {

      }
    });
  }
  // 获得登录的数据
  doLogin(e) {
    e.preventDefault();
    const data = ['username', 'password'];
    const param = this.props.form.getFieldsValue(data);
    this.props.form.validateFields(data, (error) => {
      if (!error) {
        this.props.userStore.doLogin(param).then((res) => {
          if (res.code === 1) {
            message.success(res.message);
            this.setModalVisibale(false);
          } else {

          }
        }).catch(() => {
          message.error('登录失败,请检查用户名和密码或者稍后再试');
        })
      } else {
        message.error(`${error}`)
      }
    })
  }

  render() {
    const { TabPane } = Tabs;
    const FormItem = Form.Item;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal title="用户中心" visible={this.props.modalVisible} okText="取消" cancelText="关闭" onOk={() => this.setModalVisibale(false)} onCancel={() => this.setModalVisibale(false)}>
        <Tabs type="card" defaultActiveKey="login" activeKey={this.state.activeKey} onChange={(activeKey) => { this.changeTabs(activeKey) }}>
          <TabPane tab="登录" key="login">
            <Form layout="vertical" onSubmit={this.doLogin}>
              <FormItem >
                {getFieldDecorator('username', {
                       rules: [{ required: true, message: 'Please input your username!' }],
                    })(<Input prefix={<Icon type="user" style={{ fontSize: 15 }} />} placeholder="请输入用户名" />)}
              </FormItem>
              <input type="hidden" />
              <FormItem >
                {getFieldDecorator('password', {
                       rules: [{ required: true, message: 'Please input your username!' }],
                    })(<Input prefix={<Icon type="lock" style={{ fontSize: 15 }} />} type="passWord" placeholder="请输入你的密码" />)}
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit">登录</Button>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane tab="注册" key="register">
            <Form layout="vertical" onSubmit={this.doRegist}>
              <input type="text" style={{ height: 0, border: 'none' }} />
              <input type="password" style={{ height: 0, border: 'none' }} />
              <FormItem >
                {getFieldDecorator('r_username', {
                       rules: [{ required: true, message: '请输入用户名!' }],
                    })(<Input prefix={<Icon type="user" style={{ fontSize: 15 }} />} placeholder="请输入用户名" />)}
              </FormItem>
              <FormItem >
                {getFieldDecorator('r_name', {
                       rules: [{ required: true, message: '请输入你的昵称!' }],
                    })(<Input prefix={<Icon type="tags" style={{ fontSize: 15 }} />} type="text" placeholder="请输入你的昵称" />)}
              </FormItem>
              <FormItem >
                {getFieldDecorator('r_password', {
                       rules: [{ required: true, message: '请输入用密码!' }],
                    })(<Input prefix={<Icon type="lock" style={{ fontSize: 15 }} />} type="passWord" placeholder="请输入你的密码" />)}
              </FormItem>
              <FormItem >
                {getFieldDecorator('r_confirmPassword', {
                       rules: [{ required: true, message: '请再次输入你的密码!' }],
                    })(<Input prefix={<Icon type="lock" style={{ fontSize: 15 }} />} type="passWord" placeholder="请再次输入你的密码" />)}
              </FormItem>
              <FormItem >
                {getFieldDecorator('r_email', {
                       rules: [{ required: true, message: '请输入你的邮箱!' }],
                    })(<Input prefix={<Icon type="mail" style={{ fontSize: 15 }} />} type="email" placeholder="请输入你的邮箱" />)}
              </FormItem>
              <FormItem >
                {getFieldDecorator('r_phone', {
                       rules: [{ required: true, message: '请输入你的电话!' }],
                    })(<Input prefix={<Icon type="mobile" style={{ fontSize: 15 }} />} type="text" placeholder="请输入你的电话" />)}
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit">注册</Button>
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
      </Modal>
    )
  }
}
UserModal = Form.create({})(UserModal); // eslint-disable-line
export default UserModal;
UserModal.propTypes = {
  setModalVisibale: PropTypes.func,
  doLogin: PropTypes.func,
  form: PropTypes.instanceOf(Form),
  modalVisible: PropTypes.bool.isRequired,
  userStore: PropTypes.instanceOf(User),
}
